<template>
  <view class="setting-page f fd-col ai-c">
    <nav-bar left-text="收货偏好设置" />
    <bg-set background="#f2f3f7" />
    <view
      :class="[
        'setting-page__setting-card f fd-col',
        !loading && listData.length === 0 && success ? 'list-empty' : '',
        loading ? 'list-loading' : '',
        !loading && listData.length === 0 && !success ? 'list-error' : '',
      ]"
    >
      <view class="header f ai-c">
        <image
          src="/static/image/profile/stage.png"
          mode="widthFix"
          style="width: 60rpx"
        ></image>
        <view class="title f fd-col ai-fs">
          <text style="font-weight: 600">收货偏好设置</text>
          <text class="subtitle">选择自提或者送货上门</text>
        </view>
      </view>
      <view class="body f1">
        <template v-if="loading"><loading /></template>
        <template v-else-if="!loading && listData.length >= 1">
          <uni-list>
            <uni-list-item
              v-for="item in listData"
              :key="item.address"
              :title="item.stageName"
              :to="`/pages/profile/setting/is-take-from-oneself-setting?userName=${item.userName}&address=${item.address}&isTakeFromOneself=${item.isTakeFromOneself}&timeChoose=${item.timeChoose}`"
              thumb="/static/image/profile/stage_small.png"
              :rightText="
                item.isTakeFromOneself === 1
                  ? '帮我暂存'
                  : item.timeChoose === 3
                  ? '未设置'
                  : item.timeChoose === 2
                  ? '周末'
                  : item.timeChoose === 1
                  ? '周一至周五'
                  : item.timeChoose === null
                  ? '未设置'
                  : '都方便'
              "
              link="navigateTo"
              clickable
            ></uni-list-item>
          </uni-list>
        </template>
        <template v-else-if="!loading && listData.length === 0 && success"
          ><loading-empty
            tip="没有驿站可以选择,快去创建吧~"
            buttonText="创建驿站"
            url="/pages/profile/stageSetting/stage-new-built"
          />
        </template>
        <template v-else-if="!loading && listData.length === 0 && !success"
          ><loading-error
        /></template>
      </view>
    </view>
  </view>
</template>

<script>
import profileAPI from "/api/modules/profile";
import StorageOperation from "/utils/index";
export default {
  name: "setting-page",
  data() {
    return { loading: false, success: true, listData: [] };
  },
  computed: {
    userName() {
      return StorageOperation.getStorageSync("userName").value;
    },
  },
  methods: {
    getListData() {
      this.loading = true;
      this.success = true;
      this.listData = [];
      profileAPI
        .getStage({ userName: this.userName })
        .then((res) => {
          this.listData = res;
        })
        .catch((err) => {
          this.success = false;
          uni.showToast({
            title: "加载驿站列表失败",
            icon: "error",
            duration: 1000,
            position: "top",
          });
          console.log(err);
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
  onShow() {
    this.getListData();
  },
};
</script>
<style lang='scss' scoped>
.setting-page {
  &__setting-card {
    margin-top: 50rpx;
    padding: 30rpx;
    width: 96%;
    box-sizing: border-box;
    border-radius: 50rpx;
    background-color: #fff;
    &.list-loading {
      position: relative;
      height: 700rpx;
    }
    &.list-empty {
      position: relative;
      height: 700rpx;
    }
    &.list-error {
      position: relative;
      height: 700rpx;
    }
    .header {
      height: 80rpx;
      .title {
        margin-left: 10rpx;
        .subtitle {
          font-size: 20rpx;
          color: #999;
        }
      }
    }
    .body {
      ::v-deep .uni-list-item {
        .uni-list-item__container {
          padding-left: 0;
          padding-right: 0;
          .uni-list-item__content-title {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}
</style>